<template>
  <view class="comment" >
    <view class="comment-header" >
      <view class="info" >
        <image class="ava" mode="aspectFill" :src="avatarUrl + itemData.user.avatar" />
        <view class="name" >{{itemData.user.name || 'momo'}}</view>
        <view class="tag" v-if="isAuthor">作者</view>
        <!-- <view class="date" >{{itemData.createTime}}</view> -->
      </view>
      <view class="like-info" >
        <!-- <view class="count" >{{itemData.messageMore.moreCount}}</view> -->
        <image class="icon" src="/static/common/unlike.png" />
      </view>
    </view>
    <view class="comment-content" >
      <view class="reply-user" v-if="itemData.replySecondUserId" >回复 <text class="reply-user-name">{{ itemData.replySecondUserName}}</text>: </view>
      <view class="content" > {{itemData.content}}</view>

    </view>
    <view class="date" >
      <view>{{formattedTime}}</view> 
      <view class="reply-text" >回复</view> 
    </view>
  </view>
</template>
<script lang='ts' setup >
import { useUserStore } from '@/store'
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { avatarUrl } from '@/service'
import dayjs from 'dayjs'

interface IProps {
  itemData: API.MESSAGE
  type: 'reply' | 'message'
}

const userStore = useUserStore()

const { userinfo } = storeToRefs(userStore)

const props = defineProps<IProps>()


const isAuthor = computed(() => {
  return props.itemData.user.id === userinfo.value.id
})


const formattedTime = computed(() => {
  const now = dayjs()
  const createTime = dayjs(props.itemData.createTime)
  const diffHours = now.diff(createTime, 'hours')
  const isThisYear = now.year() === createTime.year()

  if (diffHours < 24) {
    return `${diffHours}小时前`
  } else if (diffHours < 48) {
    return `昨天：${createTime.format('HH:mm')}`
  } else if (isThisYear) {
    return createTime.format('MM:DD')
  } else {
    return createTime.format('YYYY-MM-DD')
  }
})

const expandComment = () => {}


</script>
<style lang='scss' scoped >
@import '../../styles/index.scss';

.comment {
  .comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .info {
      display: flex;
      align-items: center;
      .ava {
        width: 66rpx;
        height: 66rpx;
        border-radius: 50%;
        // background-color: green;
        margin-right: 24rpx;
        box-sizing: border-box;
      }
      .name {
        font-weight: 600;
        font-size: 24rpx;
        margin-right: 12rpx;
        color: $text-grey;
      }
      .tag {
        color: $main-color;
        margin-right: 12rpx;
        font-size: 20rpx;
      }
      .date {
        font-size: 20rpx;
      }
    }
    .like-info {
      display: flex;
      align-items: center;
      .count {
        margin-right: 12rpx;
        color: $text-color;
        font-size: 22rpx;
      }
      .icon {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
  .comment-content {
    width: calc(100% - 86rpx);
    max-height: 130rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    position: relative;
    left: 86rpx;
    color: $article-color;
    font-size: $font-size-5;
    display: flex;
    .reply-user {
      margin-right: 12rpx;
      .reply-user-name {
        color: $text-grey;
      }
    }
  }
  .date {
    font-size: 22rpx;
    color: $text-grey;
    margin-left: 86rpx;
    margin-top: 18rpx;
    display: flex;
    align-items: center;
    .reply-text {
      color: $text-grey;
      margin-left: 12rpx;
    }
  }
  
  .expand-comment {
    margin-top: 12rpx;
    color: $text-grey;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    .text {
      margin-right: 12rpx;
    }
    image {
      width: 20rpx;
      height: 20rpx;
    }
  }
}
</style>